
<template>
  <div class='smile-table' :class="[tData.columnFixed?'fixed-table':'']">
    <header v-if="tData.title" v-text="tData.title"></header>
    <div class='table-content'>
      <vue-scroll id="scroll1" ref='scroll1' :ops="{scrollPanel:{scrollingY:false}}" @handle-scroll="handleScroll">
        <Table ref='table1'
        :span-method="tData.spanMethod"
        :border="tData.border"
        @sort-change="handleSortChange"
        @select-all="handleSelectAll"
        :data="tData.tableData"
        style="width: 100%">
        <TableColumn
            v-if="tData.selection.show"
            type="selection"
            min-width='3%'
          ></TableColumn>
          <TableColumn
          v-for="(th ,i) in tData.tableHeader"
          :prop="th.prop"
          :label="th.label"
          :min-width="th.minWidth"
          :width="th.width"
          :sortable="!!th.sortable"
          :key="th.prop+i">
          </TableColumn>
        </Table>
      </vue-scroll>
    </div>
    <div class='table-content'>
      <vue-scroll id="scroll2" ref="scroll2" :ops="{pushLoad:{autoLoadDistance:1}}" @handle-scroll="handleScroll2">
        <Table  ref='table2'
          :data="tData.tableData"
          :stripe="tData.stripe"
          :span-method="tData.spanMethod"
          :border="tData.border"
          :row-class-name="tData.rowClassHandler"
          @selection-change="handleSelectionChange"
          @select="handleSelect"
          style="width: 100%">
          <TableColumn
            v-if="tData.selection.show"
            type="selection"
            min-width='3%'
          >
          </TableColumn>
          <template v-for="(th ,i) in tData.tableHeader" >
            <TableColumn
            v-if="!th.type"
            :prop="th.prop"
            :label="th.label"
            :min-width="th.minWidth"
            :width="th.width"
            :sortable="!!th.sortable"
            :key="th.prop+i">
            </TableColumn>
            <TableColumn
              v-if="th.type"
              :prop="th.prop"
              :label="th.label"
              :min-width="th.minWidth"
              :width="th.width"
              :sortable="!!th.sortable"
              :key="th.prop+i"
              >
              <template  slot-scope="scope">
                <!-- <div v-if="!scope.row.disabled" :class="'table-cell-'+th.type"> -->
                <div :class="'table-cell-'+th.type">
                  <template  v-if="th.type==='input'">
                    <Input v-model="scope.row[th.prop]" :table-row-data="scope.row" />
                    <span v-text="scope.row['unit']"></span>
                  </template>
                  <template  v-if="th.type==='select'">
                    <SmileSelect v-model="scope.row[th.prop]" :data="th" :table-row-data="scope.row" />
                  </template>
                  <template  v-if="th.type==='radio'">
                  <Radio :name="th.label+scope.$index" v-for="(radio,index) in th.list" @change="handleChange($event,scope.row,button.tData.callback)" :key="radio.label+index">{{radio.label}}</Radio>
                  </template>
                  <template  v-if="th.type==='button-list'">
                  <!-- <Button v-for="button in th.list" @click="handleClick($event,scope.row,button.callback)" :table-row-data="scope.row" :key="button.type" :data='button' :disabled="i>=scope.row.disableArr[0]&&i<=scope.row.disableArr[1]"></Button> -->
                  <Button v-for="button in th.list" @click="handleClick($event,scope.row,button.callback)" :table-row-data="scope.row" :key="button.type" :data='button'></Button>
                  </template>
                  <template  v-if="th.type==='tag'">
                  <div :class="th.className" @click.stop="handleClick($event,scope.row,th.callback)" @dblclick.stop="handleDblclick($event,scope.row,th.dblcallback)" v-html="(scope.row[th.prop]&&scope.row[th.prop].text)||scope.row[th.prop]"  ></div>
                  </template>
                  <template v-if="th.type==='time'">
                    {{scope.row[th.prop]}}
                  </template>
                </div>
                <!-- <div  v-if="scope.row.disabled" :class="'table-cell-'+th.type">
                  <template  v-if="th.type==='button-list'">
                    <Button v-for="button in th.list" @click="handleClick($event,scope.row,button.callback)" :table-row-data="scope.row" :key="button.type" :data='button'></Button>
                  </template>
                   <template  v-if="th.type==='input'">
                    <Input v-model="scope.row[th.prop]"  />
                  </template>
                  <template  v-if="th.type==='select'">
                    <SmileSelect v-model="scope.row[th.prop]"  />
                  </template>
                  <span v-else v-html="scope.row[th.prop]"></span>
                </div> -->

              </template>
            </TableColumn>

          </template>
        </Table>
      </vue-scroll>
    </div>
    <div class='table-content'  v-if="tData.columnFixed" :style="{width:(tData.tableHeader[0].width||tData.tableHeader[0].minWidth)+'px'}">
      <div>
      <Table id="table4" ref='table4'
        :span-method="tData.spanMethod"
        :border="tData.border"
        @sort-change="handleSortChange"
        @select-all="handleSelectAll"
        :data="tData.tableData"
        >
        <TableColumn
            v-if="tData.selection.show"
            type="selection"
            min-width='3%'
          ></TableColumn>
          <TableColumn
          :prop="tData.tableHeader[0].prop"
          :label="tData.tableHeader[0].label"
          :min-width="tData.tableHeader[0].minWidth"
          :width="tData.tableHeader[0].width"
          :sortable="!!tData.tableHeader[0].sortable"
          :key="tData.tableHeader[0].prop+'fixed'">
          </TableColumn>
        </Table>
        <div class="fixed-body-wrapper">
          <vue-scroll id="scroll3" ref="scroll3" :ops="{pushLoad:{autoLoadDistance:1}}" @handle-scroll="handleScroll3">
            <Table  ref='table3'
              :data="tData.tableData"
              :stripe="tData.stripe"
              :span-method="tData.spanMethod"
              :border="tData.border"
              @selection-change="handleSelectionChange"
              @select="handleSelect"
              style="width: 100%">
              <TableColumn
                v-if="tData.selection.show"
                type="selection"
                min-width='3%'
              >
              </TableColumn>
              <template >
                <TableColumn
                v-if="!tData.tableHeader[0].type"
                :prop="tData.tableHeader[0].prop"
                :label="tData.tableHeader[0].label"
                :min-width="tData.tableHeader[0].minWidth"
                :width="tData.tableHeader[0].width"
                :sortable="!!tData.tableHeader[0].sortable"
                :key="tData.tableHeader[0].prop+'fixed'">
                </TableColumn>
                <TableColumn
                  v-if="tData.tableHeader[0].type"
                  :prop="tData.tableHeader[0].prop"
                  :label="tData.tableHeader[0].label"
                  :min-width="tData.tableHeader[0].minWidth"
                  :width="tData.tableHeader[0].width"
                  :sortable="!!tData.tableHeader[0].sortable"
                  :key="tData.tableHeader[0].prop+'fixed'">
                  <template  slot-scope="scope">
                    <div v-if="!scope.row.disabled" :class="'table-cell-'+th.type">
                  <template  v-if="th.type==='input'">
                    <Input v-model="scope.row[th.prop]"  />
                  </template>
                  <template  v-if="th.type==='select'">
                    <SmileSelect v-model="scope.row[th.prop]" :data="th"  />
                  </template>
                  <template  v-if="th.type==='radio'">
                  <Radio :name="th.label+scope.$index" v-for="(radio,index) in th.list" @change="handleChange($event,scope.row,button.tData.callback)" :key="radio.label+index">{{radio.label}}</Radio>
                  </template>
                  <template  v-if="th.type==='button-list'">
                  <Button v-for="button in th.list" @click="handleClick($event,scope.row,button.callback)" :table-row-data="scope.row" :key="button.type" :data='button'></Button>
                  </template>
                  <template  v-if="th.type==='tag'">
                  <div  :class="th.className" @click.stop="handleClick($event,scope.row,th.callback)" @dblclick.stop="handleDblclick($event,scope.row,th.dblcallback)" v-html="(scope.row[th.prop]&&scope.row[th.prop].text)||scope.row[th.prop]"  ></div>
                  </template>
                  <template v-if="th.type==='time'">
                    {{scope.row[th.prop]}}
                  </template>
                </div>
                <span v-if="scope.row.disabled" v-html="scope.row[th.prop]"></span>
                  </template>
                </TableColumn>

              </template>
            </Table>
          </vue-scroll>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Table, TableColumn, Radio } from 'element-ui'
import SmileSelect from 'lib/components/smileSelect'
import Input from 'lib/components/smileInput'
import Button from 'lib/components/button'
export default {
  name: 'SmileTable',
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  components: {
    Button: Button,
    Input: Input,
    Radio: Radio,
    Table: Table,
    TableColumn: TableColumn,
    SmileSelect: SmileSelect
  },
  data () {
    return {
      tData: this.data,
      scroll: {
        current: ''
      },
      timeout: ''
    }
  },
  beforeCreate () {
  },
  computed: {

  },

  created () {

  },
  mounted () {
  },
  methods: {
    handleSortChange (a) {

    },
    handleScroll (vertical, horizontal, nativeEvent) {
      let current = this.scroll.current
      if (!current || current === nativeEvent.target.parentNode.id) {
        this.$set(this.scroll, 'current', nativeEvent.target.parentNode.id)
        this.$refs.scroll2 && this.$refs.scroll2.scrollTo({ x: horizontal.scrollLeft }, false)
      } else {
        this.$set(this.scroll, 'current', '')
      }
    },
    handleScroll2 (vertical, horizontal, nativeEvent) {
      let current = this.scroll.current
      if (!current || current === nativeEvent.target.parentNode.id) {
        this.$set(this.scroll, 'current', nativeEvent.target.parentNode.id)
        this.$refs.scroll1 && this.$refs.scroll1.scrollTo({ x: horizontal.scrollLeft }, false)
        this.$refs.scroll3 && this.$refs.scroll3.scrollTo({ y: vertical.scrollTop }, false)
      } else {
        this.$set(this.scroll, 'current', '')
      }
    },
    handleScroll3 (vertical, horizontal, nativeEvent) {
      let current = this.scroll.current
      if (!current || current === nativeEvent.target.parentNode.id) {
        this.$set(this.scroll, 'current', nativeEvent.target.parentNode.id)
        this.$refs.scroll2 && this.$refs.scroll2.scrollTo({ y: vertical.scrollTop }, false)
      } else {
        this.$set(this.scroll, 'current', '')
      }
    },
    handleSelectAll (a) {
      this.$refs.table2.toggleAllSelection()
    },
    handleSelect (selection, row) {
      this.$refs.table1.toggleRowSelection(row)
    },
    handleSelectionChange (a) {
      let func = this.tData.selection.selectCallback
      if (typeof func === 'function') {
        func(a)
      }
      let ids = []
      a.forEach(e => {
        ids.push(e.id)
      })
      this.$set(this.tData.selection, 'ids', ids)
    },
    handleClick (e, data, callback) {
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        e.preventDefault()
        if (typeof callback === 'function') {
          callback(data, e)
        } else {
          this.$emit('click', { type: callback, data: data })
        }
      }, 300)
    },
    handleDblclick (e, data, callback) {
      clearTimeout(this.timeout)
      e.preventDefault()
      if (typeof callback === 'function') {
        callback(data)
      } else {
        this.$emit('click', { type: callback, data: data })
      }
    },
    handleInput (e, data, callback) {
      if (typeof callback === 'function') {
        callback(data)
      } else {
        this.$emit('input', { type: callback, data: data })
      }
      e.target.preventDefault()
    },
    handleChange (e, data, callback) {
      if (typeof callback === 'function') {
        callback(data)
      } else {
        this.$emit('change', { type: callback, data: data })
      }
      e.preventDefault()
    }
  }
}
</script>
<style lang="scss">
.smile-table{
  >.table-content{
    &:nth-child(1){
      overflow-y: hidden;
      height:50px;
      .el-table__body-wrapper{
        display: none
      }
      .__rail-is-horizontal{
        display: none
      }
    }
    &:nth-child(2){
      height:calc(100% - 50px);
      .el-table__header-wrapper{
        display: none
      }
    }
    &:nth-child(3){
      height:100%;
      position: absolute;
      left:0;
      top:0;
      >div{
        width:100%;
        height:100%;
        position: relative;
      }
      .fixed-body-wrapper{
        position: absolute;
        top:50px;
        height:calc(100% - 50px);
        width:100%;
        overflow-x: hidden;
        .el-table__header-wrapper{
          display: none
        }
        .__rail-is-vertical{
        display: none
      }
      }
    }
    .el-table{
      height:calc(100% - 2px)
    }
  }
}
.fixed-table{
}
#table4{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  overflow: hidden ;
  .el-table__header-wrapper{
    overflow: hidden;
  }
  .el-table__body-wrapper{
    display: none;

  }
  .el-table__header{
      tr th:nth-child(n+2){
        display: none
      }
    }
}
</style>
